<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GitCode-文心大模型-智源研究院AI大赛 | 智能童话书应用</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { 
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh; color: #333;
        }
        .header {
            background: rgba(255, 255, 255, 0.95);
            padding: 1rem 0; box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            position: sticky; top: 0; z-index: 100;
        }
        .header-content {
            max-width: 1200px; margin: 0 auto; padding: 0 2rem;
            display: flex; align-items: center; justify-content: space-between;
        }
        .logo h1 { color: #4a5568; font-size: 1.5rem; font-weight: bold; }
        .competition-badge {
            background: linear-gradient(45deg, #ff6b6b, #feca57);
            color: white; padding: 0.5rem 1rem; border-radius: 20px;
            font-size: 0.9rem; font-weight: bold;
        }
        .container { max-width: 1200px; margin: 2rem auto; padding: 0 2rem; }
        .main-content { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; }
        .control-panel, .story-display {
            background: rgba(255, 255, 255, 0.95); border-radius: 15px;
            padding: 2rem; box-shadow: 0 8px 32px rgba(0,0,0,0.1);
        }
        .form-group { margin-bottom: 1.5rem; }
        .form-group label { display: block; margin-bottom: 0.5rem; font-weight: bold; color: #4a5568; }
        .form-control {
            width: 100%; padding: 0.75rem; border: 2px solid #e2e8f0;
            border-radius: 8px; font-size: 1rem;
        }
        .character-selector {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 0.5rem; margin-top: 0.5rem;
        }
        .character-option {
            padding: 0.5rem; border: 2px solid #e2e8f0; border-radius: 8px;
            text-align: center; cursor: pointer; background: white;
        }
        .character-option.selected { border-color: #667eea; background: #667eea; color: white; }
        .btn {
            padding: 0.75rem 1.5rem; border: none; border-radius: 8px;
            font-size: 1rem; font-weight: bold; cursor: pointer;
        }
        .btn-primary {
            background: linear-gradient(45deg, #667eea, #764ba2);
            color: white; width: 100%;
        }
        .story-content { line-height: 1.8; font-size: 1.1rem; }
        .loading { text-align: center; color: #667eea; }
    </style>
</head>
<body>
    <div class="header">
        <div class="header-content">
            <div class="logo">
                <h1>🎭 智能童话书应用</h1>
            </div>
            <div class="competition-badge">
                GitCode-文心大模型-智源研究院AI大赛
            </div>
        </div>
    </div>

    <div class="container">
        <div class="main-content">
            <div class="control-panel">
                <h2>📚 创作您的童话故事</h2>
                
                <div class="form-group">
                    <label>故事主题</label>
                    <select class="form-control" id="theme">
                        <option value="友谊">友谊</option>
                        <option value="勇气">勇气</option>
                        <option value="诚实">诚实</option>
                        <option value="善良">善良</option>
                        <option value="坚持">坚持</option>
                        <option value="分享">分享</option>
                    </select>
                </div>

                <div class="form-group">
                    <label>年龄组</label>
                    <select class="form-control" id="ageGroup">
                        <option value="3-5岁">3-5岁</option>
                        <option value="6-8岁" selected>6-8岁</option>
                        <option value="9-12岁">9-12岁</option>
                    </select>
                </div>

                <div class="form-group">
                    <label>选择角色</label>
                    <div class="character-selector" id="characterSelector">
                        <div class="character-option" data-character="小兔子">🐰 小兔子</div>
                        <div class="character-option" data-character="小熊">🐻 小熊</div>
                        <div class="character-option" data-character="小狐狸">🦊 小狐狸</div>
                        <div class="character-option" data-character="小公主">👸 小公主</div>
                        <div class="character-option" data-character="小王子">🤴 小王子</div>
                        <div class="character-option" data-character="小精灵">🧚 小精灵</div>
                    </div>
                </div>

                <button class="btn btn-primary" onclick="generateStory()">
                    🎨 生成童话故事
                </button>
            </div>

            <div class="story-display">
                <div id="storyContent">
                    <div class="loading">
                        <h2>🌟 欢迎来到智能童话世界！</h2>
                        <p>基于 ERNIE-4.5-0.3B-Paddle 模型</p>
                        <p>融合智源研究院 Infinity-Instruct 数据集</p>
                        <p>请选择您喜欢的主题和角色，开始创作专属童话故事！</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        let selectedCharacters = [];

        // 角色选择
        document.querySelectorAll('.character-option').forEach(option => {
            option.addEventListener('click', function() {
                const character = this.dataset.character;
                
                if (this.classList.contains('selected')) {
                    this.classList.remove('selected');
                    selectedCharacters = selectedCharacters.filter(c => c !== character);
                } else {
                    this.classList.add('selected');
                    selectedCharacters.push(character);
                }
            });
        });

        // 生成故事
        async function generateStory() {
            const theme = document.getElementById('theme').value;
            const ageGroup = document.getElementById('ageGroup').value;
            
            if (selectedCharacters.length === 0) {
                alert('请至少选择一个角色！');
                return;
            }

            const storyContent = document.getElementById('storyContent');
            storyContent.innerHTML = '<div class="loading">🎨 正在创作您的专属童话故事...</div>';

            try {
                const response = await fetch('/api/generate_story', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        theme: theme,
                        characters: selectedCharacters,
                        age_group: ageGroup
                    })
                });

                const result = await response.json();
                
                if (result.success) {
                    displayStory(result.story);
                } else {
                    storyContent.innerHTML = '<div class="error">生成故事失败: ' + result.error + '</div>';
                }
            } catch (error) {
                storyContent.innerHTML = '<div class="error">网络错误: ' + error.message + '</div>';
            }
        }

        function displayStory(story) {
            const storyContent = document.getElementById('storyContent');
            storyContent.innerHTML = `
                <h2>📖 ${story.title}</h2>
                <div class="story-meta">
                    <p><strong>主题:</strong> ${story.theme} | <strong>年龄组:</strong> ${story.age_group}</p>
                    <p><strong>角色:</strong> ${story.characters.join(', ')}</p>
                </div>
                <div class="story-content">
                    ${story.story.replace(/\n/g, '<br>')}
                </div>
                <div class="moral-lesson">
                    <h3>💡 故事寓意</h3>
                    <p>${story.moral_lesson}</p>
                </div>
                <div class="interactive-questions">
                    <h3>🤔 思考问题</h3>
                    <ul>
                        ${story.interactive_questions.map(q => `<li>${q}</li>`).join('')}
                    </ul>
                </div>
            `;
        }

        // 系统状态检查
        setInterval(async () => {
            try {
                const response = await fetch('/api/system_status');
                const status = await response.json();
                console.log('系统状态:', status);
            } catch (error) {
                console.log('系统状态检查失败:', error);
            }
        }, 30000);
    </script>
</body>
</html>